<template>
	<view class="figure-identity flex--col">
		<view class="figure-identity-avatar flex--row" 
			:class="{'figure-identity-avatar--blind':role === Role.ROLE_BLIND,'figure-identity-avatar--volunteer':role === Role.ROLE_VOLUNTEER}"
			>
			<image aria-label="用户头像" :src="figure.img" class="avatar" :class="{'online':figure.status === 1}" mode="aspectFit"></image>
		</view>
		<view class="figure-identity-info flex--col">
			<text class="info-name text--secondary-dark">{{figure.name}}</text>
			<text class="info-location">{{ statusText }}</text>
		</view>
		
	</view>
</template>

<script>
	import * as Role from "@/core/constant/role.js"
	export default {
		props:['figure','role'],
		watch:{
			'figure.status'(newVal,oldVal){
				console.log(newVal)
				if(newVal === 1){
					this.statusText = "在线"
				}else{
					this.statusText = "离线"
				}
				console.log(this.statusText )
			},
			deep:true
		},
		data(){
			return {
				statusText:"等待连接",
				Role
			}
		},
	}
</script>

<style lang="scss" scoped>
	.text--secondary-dark{
		font-size: 16px;
		font-weight: 700;
		color:#333;
	}
	
	.figure-identity{
		justify-content: center;
		align-items:center;
		gap:4px;
	}
	
	.figure-identity-avatar{
		width:128px;
		height:128px;
		border-radius: 50%;
		overflow: hidden;
		align-items:center;
		justify-content: center;
		
		image{
			border-radius: 50%;
			height:56px;
			width:56px;
			filter:grayscale(80%);
			
			&.online{
				filter:grayscale(0%);
			}
		}
		
		&--volunteer{
			background-color: #db720a26;
		}
		
		&--blind{
			border:1px solid #333;
		}
	}
	
	.figure-identity-info{
		align-items: center;
		gap:4px;
		
		.info-location{
			font-size: 16px;
			font-weight: 700;
			color:#FF8D1A;
		}
		
	}
	
	
	
	
		
	
</style>